$(function () {
    let laypage = layui.laypage;
    // 申明一个全局的请求参数
    const canshu = {
        catename: '',
        page: '1',
        limit: '5',
    }

    $('#close').on('click', function () {
        $(this).hide()
        $('#open').show()
        $('#layuiForm').hide()
    })

    $('#open').on('click', function () {
        $(this).hide()
        $('#close').show()
        $('#layuiForm').show()
    })

    //点击新增按钮,开启一个弹窗
    let layerIndex = 0
    $('#add').on('click', function () {
        layerIndex = layer.open({
            type: 1,
            title: '添加分类',
            area: ['600px', '300px'],
            content: $('#dialog-edit').html()
        });
        let i = $('#addBtn').val()
        // console.log($('#addBtn')[0]);
        $('body').on('click', '#left', function () {
            i++
            $('#addBtn').val(i)
        })
        $('body').on('click', '#right', function () {
            i--
            $('#addBtn').val(i)
        })

    })

    const form = layui.form
    //监听添加分类表单提交
    $('body').on('submit', '#dialog-add', function (e) {
        e.preventDefault()
        let data = {
            catename: $('#f').val(),
            icon: $('#s').val(),
            sort_num: +$('#addBtn').val()
        }


        $.ajax({
            method: 'POST',
            url: '/ydd_cate/add',
            headers: {
                'x-token': localStorage.getItem('token'),
                // 'content-type': 'application/json',
            },
            data: JSON.stringify(data),
            success: function (res) {
                console.log(res);
                if (res.errno !== 0) return layer.msg('添加失败')
                layer.msg('添加成功')
                //关闭弹窗
                layer.close(layerIndex)
                renderCate()
            }
        })

    })

    //点击按钮弹出修改页面
    $('body').on('click', '#gai', function () {
        layerIndex = layer.open({
            type: 1,
            title: '修改分类',
            area: ['600px', '300px'],
            content: $('dialog-gai').html()
        });
    })



    renderCate()
    function renderCate(canshu) {
        $.ajax({
            method: 'GET',
            url: '/ydd_cate/list',
            headers: {
                'x-token': localStorage.getItem('token')
            },
            data: canshu,
            success: function (res) {
                // console.log(res);
                if (res.errno !== 0) return alert(errmsg)
                const { data, pagesize, totalPages } = res
                const { count, currentPage } = data
                // q.pagesize = pagesize //每页数量
                // q.currentPage = currentPage //当前页
                const htmlTpl = data.data.map((item, i) => {
                    const { catename, icon, id, sort_num } = item
                    return `
                    <tr>
                    <td>${i + 1}</td>
                    <td>${id}</td>
                    <td>${catename}</td>
                     <td>${icon}<i class="fa ${icon}"></i></td>
                     <td>${sort_num}</td>
                     <td class="compile">
                        <ul>
                        <li><i class="layui-icon layui-icon-edit" id="gai"></i></li>
                        <li id='del' data-id='${id}'><i class="layui-icon layui-icon-delete"></i></li>
                        </ul>
                     </tr>
                     </td>
                    `
                }).join('')
                $('.layui-table tbody').html(htmlTpl)
                //添加分页器
                renderPage(count)


            }
        })
    }


    // 设置文章的删除
    $(".layui-table tbody").on('click', '#del', function () {
        const id = $(this).data('id')
        // 设置是否删测除的二次确认
        //确认删除弹框
        layer.confirm('确定删除吗,是否继续?', { title: ' ' },
            function (index) {
                //点击确认，删除接口
                $.ajax({
                    url: '/ydd_cate/del',
                    method: 'GET',
                    data: { id: id },
                    headers: {
                        'x-token': localStorage.getItem('token')
                    },
                    success: function (res) {
                        console.log(res.errmsg);
                        renderCate()
                        layer.open({
                            anim: 1,
                            skin: 'demo-class',
                            shade: 0,
                            offset: '10px',
                            area: ['300px', '40px'],
                            title: false,
                            btn: false,
                            time: 2000,
                            closeBtn: 0,
                            tipsMore: true,
                            content: `<div class="true"><i class="layui-icon layui-icon-ok-circle"></i>${res.errmsg}</div>`
                        });
                    }
                })

                layer.close(index);
            },
            function () {
                layer.open({
                    anim: 1,
                    skin: 'democlass',
                    shade: 0,
                    offset: '10px',
                    area: ['300px', '40px'],
                    title: false,
                    btn: false,
                    time: 2000,
                    closeBtn: 0,
                    tipsMore: true,
                    content: '<div class="false"><i class="layui-icon layui-icon-close-fill"></i>已取消</div>'
                });
            })

    });







    //分页渲染
    function renderPage(total) {
        laypage.render({
            elem: 'page-box', //存放分页器的容器
            count: total,  //数据总数       
            limit: canshu.limit, //每页显示多少条
            curr: canshu.page, //当前请求的是那一页 
            layout: ['count', 'limit', 'prev', 'page', 'next'],
            limits: [3, 5, 10]
            , jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                //修改查询参数
                //注意:当分页页码发生改变时会触发jump回调,通过obj.curr得到当前用户点击的页码
                canshu.page = obj.curr
                //当用户点击了每页要请求的数据条数后,也会触发jump回调函数,通过obj.limit获取到用户选择的条数
                canshu.limit = obj.limit
                // console.log(canshu);
                //首次不执行
                if (!first) {
                    //调用渲染函数,从新渲染页面
                    renderCate(canshu)
                }
            }
        })
    }





    // 设置搜索框的查找
    $('#layuiForm').on('submit', function (e) {
        e.preventDefault()
        // 获取到用户输入的数据
        canshu.catename = $('[name="title"]').val()
        // console.log($('[name="title"]').val());
        renderCate(canshu)
    })

    // 设置重置的点击效果
    $('#chongzhi').on('click', function () {
        $('[title="刷新"]').click()
    })




    // 设置右侧字体图标的效果
    $("#close").hover(function () {
        $("#close_sousuo").stop().show()
    }, function () {
        $("#close_sousuo").stop().hide()
    })

    $('#open').hover(function () {
        $(".open_sousuo").stop().show()
    }, function () {
        $(".open_sousuo").stop().hide()
    })
    $('#shuaxin').hover(function () {
        $("#flushed").stop().show()
    }, function () {
        $("#flushed").stop().hide()
    })
    $('#shuaxin').on('click', function () {
        $('[title="刷新"]').click()
    })




    // 设置右侧菜单的点击效果
    $('#menu').on('click', function () {
        $("#set_up").stop().toggle()
        // 给菜单内容部的选项框设置时间
        const arr = document.querySelectorAll('[name=q]')
        arr.forEach((item, i) => {
            if (item.checked) {
                item.parentNode.style.color = '#5a9cf8'
            } else {
                item.parentNode.style.color = '#999999'
            }
        })

        // 设置input的点击事件
        $('[name=q]').on('click', function () {
            arr.forEach((item, i) => {
                if (item.checked) {
                    item.parentNode.style.color = '#5a9cf8'
                    document.querySelectorAll(" .layui-table tbody tr").forEach(item => {
                        $(item).find("td").eq(i + 1).show()
                    })
                    $(' .layui-table thead tr th').eq(i + 1).show()
                } else {
                    document.querySelectorAll(" .layui-table tbody tr").forEach(item => {
                        $(item).find("td").eq(i + 1).hide()
                    })
                    $(' .layui-table thead tr th').eq(i + 1).hide()
                    item.parentNode.style.color = '#999999'
                }
            })
        })


    })











    //*---文件导出
    let arrStr = [] //表格中的每一行
    let newArr = [] //处理好的数据数组
    $("#btnExports").on("click", function () {
        // "\t1\t首页Banner\t不是每次微笑都证明我很快乐\t\thttp://www.jd.com\t"
        $("#adTable  tr").each(function () { arrStr.push($(this)[0].innerText) })
        newArr = arrStr.map((v, i) => { return v.split(/\t/) })
        clickDownload()
    })
    function clickDownload() {
        let textTh = "I#,分类ID,分类名称,图标,权重,操作\n"; //表格头
        // let textTr = "□,1,首页Banner,不是每次微笑都证明我很快乐,图片破损,	http://www.jd.com\n"
        let text = textTh // 最终表格数据
        newArr.forEach((v, i) => { text += v + "\n" })
        let downloadLink = document.createElement('a');
        downloadLink.href = 'data:attachment/csv;charset=utf-8,' + "\uFEFF" + encodeURIComponent(text);
        downloadLink.download = "分类管理信息.xlsx";
        downloadLink.click();
    }



})